<script setup>
import { ref, watch} from "vue";
import { allTree as orgAllTree } from '@/api/system/organization.js'
import { list as roleList } from '@/api/system/role.js'
import { list as postList } from '@/api/system/post.js'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: () => ({
      id: "",
      username: "",
      nickname: "",
      sex: "",
      phone: "",
      email: "",
      status: "",
      orgId: '',
      postId:'',
      roleIds: [],
      remark: "",
      createTime: "",
    })
  }
})

const emit = defineEmits(['update:visible', 'confirm'])

const isVisible = ref(false)

const adminUser = ref({
  id: "",
  username: "",
  nickname: "",
  sex: "",
  phone: "",
  email: "",
  status: "",
  orgId: '',
  postId: "",
  roleIds: [],
  remark: "",
  createTime: "",
})

const rules = ref({
  username: [
    {required: true, message: '用户名不能为空', trigger: 'blur'}
  ],
  nickname: [
    {required: true, message: '昵称不能为空', trigger: 'blur'}
  ],
  phone: [
    {required: true, message: '手机号不能为空', trigger: 'blur'}
  ],
  orgId: [
    {required: true, message: '组织不能为空', trigger: 'change'}
  ],
  roleIds: [
    {required: true, message: '角色不能为空', trigger: 'change'}
  ]
})

let addRules = ref({
  username: [
    {required: true, message: '用户名不能为空', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '密码不能为空', trigger: 'blur'}
  ],
  nickname: [
    {required: true, message: '昵称不能为空', trigger: 'blur'}
  ],
  phone: [
    {required: true, message: '手机号不能为空', trigger: 'blur'}
  ],
  orgId: [
    {required: true, message: '组织不能为空', trigger: 'change'}
  ],
  roleIds: [
    {required: true, message: '角色不能为空', trigger: 'change'}
  ]
})


const formRef = ref(null)

//组织信息
let orgData = ref([])

const roleData = ref([])

const sexData = ref([
  {label: "男", value: 1},
  {label: "女", value: 2},
])

const statusData = ref([
  {label: "启用", value: 1},
  {label: "禁用", value: 2}
])

const postData = ref([])

watch(() => props.visible, (newValue) => {
  isVisible.value = newValue
  //更新组织信息
  if (newValue) {
    orgAllTree().then(resp => {
      orgData.value = resp.data
    })

    roleList({status: 1}).then(resp => {
      roleData.value = resp.data
    })

    postList({status: 1}).then((resp) => {
      postData.value = resp.data
    })
  }
})

watch(() => props.data, (newVal) => {
  adminUser.value = {...newVal}
})

//监听取消事件
const onCancel = () => {
  emit('update:visible', false)
  adminUser.value = {
    id: "",
    username: "",
    nickname: "",
    sex: "",
    phone: "",
    email: "",
    status: "",
    orgId: '',
    postId: "",
    roleIds: [],
    remark: "",
    createTime: "",
  }
  formRef.value.resetFields()
}

//监听确认事件
const onConfirm = () => {
  if (!formRef.value) return
  formRef.value.validate((valid) => {
    if (valid) {
      emit('confirm', adminUser.value)
    }
  })
}

//监听dialog关闭回调事件
const handleDialogClose = () => {
  onCancel();
}

//监听选择组织事件
const orgChangeHandle = (selected) => {
  console.log(111, selected)
}
</script>

<template>
<el-dialog v-model="isVisible" width="560px" @close="handleDialogClose" :title="adminUser.id> 0 ? '编辑' : '新增'" :close-on-click-modal="false">
  <el-form ref="formRef" inline :model="adminUser" label-width="86px" :rules="adminUser.id === '' ? addRules : rules">
    <el-row>
      <el-col :span="12">
        <el-form-item prop="username" label="用户名">
          <el-input v-model="adminUser.username" placeholder="请输入用户名" maxlength="16"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="password" label="密码">
          <el-input :disabled="adminUser.id !== ''" v-model="adminUser.password" placeholder="请输入密码" maxlength="64" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item prop="nickname" label="用户昵称">
          <el-input v-model="adminUser.nickname" placeholder="请输入用户昵称" maxlength="16"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="roleIds" label="角色">
          <el-select v-model="adminUser.roleIds" style="width: 164px" placeholder="请选择角色" multiple>
            <el-option v-for="(item, index) in roleData" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item prop="phone" label="手机号">
          <el-input v-model="adminUser.phone" placeholder="请输入手机号" maxlength="13" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="email" label="邮箱">
          <el-input v-model="adminUser.email" placeholder="请输入邮箱地址" maxlength="64" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item prop="sex" label="性别">
          <el-select v-model="adminUser.sex" placeholder="请选择你的性别" style="width: 164px">
            <el-option v-for="(item, index) in sexData" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="status" label="状态">
          <el-select v-model="adminUser.status" placeholder="请选择状态" style="width: 164px">
            <el-option v-for="(item, index) in statusData" :key="index" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item prop="orgId" label="所属部门">
          <el-tree-select
              node-key="id"
              :props="{label: 'name', }"
              placeholder="请选择所属部门"
              v-model="adminUser.orgId"
              :data="orgData"
              check-strictly
              :render-after-expand="false"
              style="width: 200px"
              @change="orgChangeHandle"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="postId" label="岗位">
          <el-select v-model="adminUser.postId" placeholder="请选择岗位" style="width: 164px ">
            <el-option v-for="(item, index) in postData" :value="item.id" :label="item.name" :key="index" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item prop="remark" label="备注" style="width: 100%">
          <el-input type="textarea" v-model="adminUser.remark" :rows="6" maxlength="255" show-word-limit/>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <template #footer>
    <el-button @click="onCancel">取消</el-button>
    <el-button type="primary" @click="onConfirm">确定</el-button>
  </template>
</el-dialog>
</template>

<style scoped lang="scss">

</style>
